import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Empty, Spin } from 'antd';
import { useContext, useEffect } from 'react';
import { WorkflowSwitchContext } from '../common';
import { getProcdefImageService } from '../services';
import { WorkflowSwitchAPI } from '../common/type';

export const WorkflowNodesImage: React.FC<WorkflowSwitchAPI.IWorkflowNodesImage> = ({
  workflowID, //展示的流程ID
}) => {
  const { requestController, prefixCls } = useContext(WorkflowSwitchContext);

  /**
   * 查看流程图接口
   */
  const { getProcdefImageLoading, getProcdefImageRun, getProcdefImageData } = getProcdefImageService(requestController);

  useEffect(() => {
    if (workflowID) {
      let params = {
        procDefID: workflowID,
      };
      getProcdefImageRun(params);
    }
  }, [workflowID]);

  return (
    <div
      style={{
        width: '100%',
        height: document.body.clientHeight * 0.5,
        textAlign: 'center',
        lineHeight: `${document.body.clientHeight * 0.5}px`,
      }}
      className={`${prefixCls}workFlowImageDiv`}
    >
      <Spin spinning={getProcdefImageLoading} style={{ height: '100%' }}>
        {getProcdefImageData ? (
          <ScrollBarLayout
            style={{
              // margin: '10px 0px',
              padding: '5px 10px',
              overflowX: 'auto',
            }}
          >
            <img src={`data:image/jpeg;base64,${getProcdefImageData}`} />
          </ScrollBarLayout>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'暂无流程图'} />
        )}
      </Spin>
    </div>
  );
};
